<template>
	<ion-content
		 class="home">
		<div class="topbar">
			<div class="top_t">
				<div class="t_left">
					<h4 class="tit">总资产(元)<span>[车销中]</span></h4>
					<h1 class="price">{{orderCount.totalProductAmount}}</h1>
				</div>
				<div class="t_right">
					<h4 class="tit">今日销售(元)</h4>
					<h1 class="price">+{{orderCount.todayOrderAmount}}</h1>
				</div>
			</div>
			<div class="top_c">
				<div class="c_box">
					<h4 class="tit">产品总数(件)</h4>
					<h2 class="price">{{orderCount.productNum}}</h2>
				</div>
				<div class="c_box">
					<h4 class="tit">今日销售(单)</h4>
					<h2 class="price">{{orderCount.todayOrderNum}}</h2>
				</div>
				<div class="c_box">
					<h4 class="tit">本月销售(单)</h4>
					<h2 class="price">{{orderCount.monthOrderNum}}</h2>
				</div>
			</div>
		</div>
		<div class="countbar">
			<div class="c_box">
				<div class="tit">本月任务(元)</div>
				<div class="price">{{orderCount.taskAmount}}</div>
			</div>
			<div class="c_box">
				<div class="tit">已完成(元)</div>
				<div class="price">{{orderCount.completedAmount}}</div>
			</div>
			<div class="c_box">
				<div class="tit">完成进度</div>
				<div class="price">{{orderCount.completedRate}}%</div>
			</div>
		</div>
		<ul class="navbar">
				<li>
					<i class="iconfont icon-saoma"></i>
					<span class="txt">扫一扫</span>
				</li>
				<li @click="openPage('printPage')">
					<i class="iconfont icon-shoukuan"></i>
					<span class="txt">打印</span>
				</li>
				<li  @click="openPage('shopCarts')">
					<!-- <i class="iconfont icon-mashangfu"></i> -->
					<i class="iconfont icon-gouwuche"></i>
					<span class="txt">购物车</span>
				</li>
				<li @click="openPage('vanTypes')">
					<i class="iconfont icon-shop"></i>
					<span class="txt">商城</span>
				</li>
		</ul>
		<div class="notice">
			<div class="notice_tit">公告：</div>
			<div class="notice_con">
				<ul>
					<li>
						<h3 class="tit">优粮城仓库到货通知</h3>
						<span class="time">2019-04-28</span>
					</li>
				</ul>
			</div>
		</div>
		<!-- <div class="home_tit">
			<div class="tit">订单信息</div>
			<div class="more">查看全部</div>
		</div> -->
		<div class="home_list">
			 <ion-list>
				 	<div class="listbox0" v-for="(order,index) in orderList" :key="index" @click="toDetail(order.orderNumber)">
						<h3 class="tit">订单号：<i>{{order.orderNumber}}</i></h3>
						<p><span class="time">{{order.createAt}}</span><strong class="price">金额：￥<em>{{order.amount}}</em></strong></p>
					</div>
					<!-- <div class="listbox0">
						<h3 class="tit">订单号：<i>2019042586585858588</i></h3>
						<p><span class="time">2019-04-28 12:25:13</span><strong class="price">金额：￥<em>3126.00</em></strong></p>
					</div> -->
						<div class="button-line" v-if="buttonLine" ><span>----这里是底线----</span></div>
			 </ion-list>
			<ion-infinite-scroll @ionInfinite="onScroll">
				<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中…">
				<!-- <ion-infinite-scroll-content loadingSpinner="null" loadingText="加载中…"> -->
			
				</ion-infinite-scroll-content>
			</ion-infinite-scroll>
		</div>
	</ion-content>
</template>

<script>
// @ is an alias to /src
import { orderList, orderCount } from "@/api/vanProducts";
import router from "../router";
import baseUtil from "@/utils/baseUtil.js";
export default {
  name: "home",
  components: {},
  data() {
    return {
      orderList: [],
      orderCount: {},
      param: {
        page: 1,
        pageSize: 5,
        status: ""
      },
      buttonLine: false
    };
  },
  onLoad() {},
  methods: {
    goShop() {
      this.$router.push({ name: "vanTypes" });
    },
    //跳转
    openPage(pageName) {
      // router.push({ name: pageName });
      this.$router.push({ name: pageName });
    },
    async onScroll(e) {
      // console.log('home-onScroll-滚动事件:',e);
      this.param.page += 1;
      // console.log('home-onScroll-param:',this.param);
      let resp = await orderList(this.param);
      // console.log('home-onScroll-resp:',resp);
      if (baseUtil.isNotBlankObjs(resp) && resp.code != null) {
        if (resp.code == 0) {
          if (resp.data != null && resp.data.length > 0) {
            resp.data.forEach(element => {
              this.orderList.push(element);
            });
          } else {
            this.buttonLine = true;
            e.target.disabled = true;
            // console.log('这里是底线');
          }
        } else this.presentToast(resp.warnMessage, "primary");
      }
      e.target.complete();
      // console.log('home-onScroll-orderList:',this.orderList);
    },
    async toDetail(orderNumber) {
      console.log("toDetail=====orderNumber:", orderNumber);
      this.$router.push({
        name: "orderDetail",
        query: { orderNumber: orderNumber }
      });
    },
    async initData() {
      console.log("home-initData-param:", this.param);
      let resp = await orderList(this.param);
      console.log("home-initData-resp:", resp);
      if (baseUtil.isNotBlankObjs(resp) && resp.code != null) {
        if (resp.code == 0) this.orderList = resp.data;
        else this.presentToast(resp.warnMessage, "primary");
      }
      let countResp = await orderCount();
      console.log("home-initData-countResp:", countResp);
      if (baseUtil.isNotBlankObjs(countResp) && countResp.code != null) {
        if (countResp.code == 0) this.orderCount = countResp.data;
        else this.presentToast(countResp.warnMessage, "primary");
      }
    },
    //弹出警告 提示等信息
    //color:"primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark"
    async presentToast(msg, color) {
      color = color == null || color == "" ? "success" : color;
      const toast = await this.$ionic.toastController.create({
        message: msg,
        duration: 2000,
        color: color,
        position: "top"
      });
      toast.present();
    }
  },
  mounted() {
    this.initData();
  }
};
</script>

<style>
.button-line {
  text-align: center;
  padding: 2rem;
}
.home.ios {
  --background: var(--ion-background-color, #fff);
}
.topbar {
  height: 14rem;
  overflow: hidden;
  background: url(../assets/images/topbg.jpg) no-repeat center top;
  background-size: cover;
}
.topbar .top_t {
  padding: 0 1rem;
  height: auto;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  margin: 3rem 0.5rem 3rem 0.5rem;
}
.topbar .tit {
  font-size: 0.8rem;
  color: #a4ced6;
  margin-bottom: 0.75rem;
}
.topbar .tit span {
  color: #fff;
  margin-left: 0.5rem;
}
.topbar .price {
  color: #fff;
}
.topbar .top_t .price {
  font-size: 1.5rem;
}
.topbar .top_t .t_left {
  text-align: left;
}
.topbar .top_t .t_right {
  text-align: right;
}
.topbar .top_c {
  padding: 0rem 1rem 0 1rem;
  height: auto;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.topbar .top_c .c_box {
}
.topbar .top_c .price {
  font-size: 1rem;
}
.countbar {
  height: 3rem;
  overflow: hidden;
  background: #e6f4fa;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.countbar .c_box {
}
.countbar .tit {
  font-size: 0.75rem;
  color: #666;
  margin: 0.3rem 0 0.2rem 0;
}
.countbar .price {
  font-size: 0.8rem;
  color: #333;
}
.navbar {
  height: auto;
  overflow: hidden;
  padding: 1rem 0.5rem 1rem 0.5rem;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.navbar li {
  flex: 1;
}
.navbar i.iconfont {
  display: block;
  margin: 0 auto 0.3rem;
  font-size: 2rem;
  color: #0689c7;
}
.navbar span.txt {
  font-size: 0.8rem;
  color: #333;
}
.notice {
  height: 1.8rem;
  line-height: 1.8rem;
  overflow: hidden;
  padding: 0 0.75rem;
  margin: 0 0.75rem;
  background: #fff5cc;
  border-radius: 0.2rem;
  display: flex;
  justify-content: flex-start;
  text-align: left;
}
.notice .notice_tit {
  width: 3rem;
  font-size: 0.75rem;
  color: #999;
}
.notice .notice_con {
  width: 85%;
}
.notice .notice_con li {
  width: 100%;
  height: 1.8rem;
  line-height: 1.8rem;
  font-size: 0.75rem;
  display: flex;
  justify-content: space-between;
}
.notice .notice_con li h3.tit {
  font-size: 0.75rem;
  height: 1.8rem;
  line-height: 1.8rem;
  color: #333;
}
.notice .notice_con li span.time {
  font-size: 0.7rem;
  color: #999;
}
.home_tit {
  margin: 0.5rem 0.75rem;
  height: 2rem;
  line-height: 2rem;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.home_tit .tit {
  font-size: 0.8rem;
  color: #333;
  font-weight: bold;
}
.home_tit .more {
  font-size: 0.75rem;
  color: #999;
}
.home_list {
  padding: 0 0.75rem;
  height: auto;
  overflow: hidden;
}
.listbox0 {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #fff;
  text-align: left;
  border-bottom: 0.05rem #eeeeee solid;
  padding: 0.75rem 0.5rem;
}
.listbox0 h3 {
  height: 1.5rem;
  line-height: 1.5rem;
  overflow: hidden;
  font-size: 0.75rem;
  color: #999;
  margin-bottom: 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 0.5rem;
}
.listbox0 h3 i {
  font-style: normal;
  font-size: 0.8rem;
  color: #333;
}
.listbox0 p {
  font-size: 0.75rem;
  color: #999;
}
.listbox0 p span {
  float: right;
}
.listbox0 p strong {
  font-weight: normal;
}
.listbox0 p strong em {
  font-size: 1rem;
  color: #f30;
  font-weight: bold;
  font-weight: bold;
  font-style: normal;
}
</style>
